<template>
    <div>
    <div class="top-con">
        <div @click="go('/baseHome')" :class="{active: route.fullPath == '/baseHome'}" class="tab">基地主页</div>
        <div @click="go('/land')" :class="{active: route.fullPath == '/land'}" class="tab">宗地管理</div>
        <div  class="title">种植基地智慧管理平台</div>
        <div @click="go('/env')" :class="{active: route.fullPath == '/env'}" class="tab">基地环境</div>
        <div @click="go('/dapeng')" :class="{active: route.fullPath == '/dapeng'}" class="tab">大棚环境</div>
    </div>
    </div>
</template>
<script lang="ts" setup>
import { watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const router = useRouter()
const route = useRoute()

const go = (url: string) => {
    router.push({
        path: url
    })
}
</script>
<style scoped>
.top-con {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 80vw;
    margin: 0 auto;
}

.title {
    width: 29.6vw;
    height: 7.8vh;
    background: url(../assets/img/a.png);
    background-size: 100% 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    font-size: 2vw;
}

.tab {
    width: 6.1vw;
    height: 3.8vh;
    background: url(../assets/img/d.png);
    background-size: 100% 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #68d562;
    font-size: 0.8vw;
    cursor: pointer;
}

.tab.active {
    background: url(../assets/img/c.png);
    background-size: 100% 100%;
    color: #c1de74;
}
</style>